<template>
    <div style="padding-bottom:50px;">
        <div style="position:absolute;top:-50px;right:0">
            <Button :type="releasedBtn" shape="circle" style="margin-right:10px;" @click="toggleShow('releasedBtn')">已发布</Button>
            <Button :type="draftBtn" shape="circle" @click="toggleShow('draftBtn')">草稿</Button>
        </div>
        <div v-if="releasedBtn == 'primary'">
            <Table :columns="columns1" :data="publicCityList" :loading="load" highlight-row @on-current-change="publicDetails"></Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page
                            :total="pageTotal"
                            :current="pageNum"
                            :page-size="pageSize"
                            @on-change="handlePage"
                            @on-page-size-change="handlePageSize"
                            show-elevator
                            show-total
                            show-sizer></Page>
                </div>
            </div>
        </div>
        <div v-if="draftBtn == 'primary'">
            <Table :columns="columns1" :data="publicCityList" :loading="load"  highlight-row @on-current-change="publicDetails"></Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page
                            :total="pageTotal"
                            :current="pageNumDraft"
                            :page-size="pageSizeDraft"
                            @on-change="handlePage"
                            @on-page-size-change="handlePageSize"
                            show-elevator
                            show-total
                            show-sizer></Page>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {formatDate} from '../libs/tools';
    export default {
        data() {
            return {
                // 按钮颜色
                releasedBtn: 'primary',
                draftBtn: 'default',
                columns1: [
                    {
                        title: "环评公示",
                        key: "Title",
                        render:  (h, params) => {
                          /*  let project_type = '';*/
                            /*let project_type_temp = params.row.Project_type;*/
                            let isDeleteTemp = params.row.IsDelete;
                            let isDelete = '';
                            if(isDeleteTemp!='0'){
                                isDelete='该公示已被管理员删除';
                            }
                           /* switch (project_type_temp) {
                                case '0':
                                    project_type = '第一次公示';
                                    break;
                                case '1':
                                    project_type = '第二次公示';
                                    break;
                                case '2':
                                    project_type = '验收公示';
                                    break;
                                case '3':
                                    project_type = '全本公示';
                                    break;
                                case '4':
                                    project_type = '其他公示';
                                    break;
                                default:
                                    project_type = '';
                                    break;
                            }*/
                            return h('div',[
                                h('div', {
                                    style: {
                                        float:'left',
                                        color: isDelete!=''?'#B5B5B5': '',
                                },
                                },/*params.row.Project_name+''+project_type*/params.row.Title),
                                h('div', {
                                    style: {
                                        float:'left',
                                        color: isDelete!=''?'red': '',
                                    },
                                },isDelete),

                              /*  h('div', params.row.Project_name),*/
                              /*  params.row.Project_name+''+project_type+''+isDelete*/
                            ]);

                        }
                    },
                    {
                        width: 100,
                        align: "center",
                        title: "公示时间",
                        key: "PublicityTime",
                        render:  (h, params) => {
                            let isDeleteTemp = params.row.IsDelete;
                            return h('div',{
                                style:{
                                    color: isDeleteTemp!='0'?'#B5B5B5': '',
                            },
                            on:{
                                click: () => {
                                    // this.publicEditor(params.row.Id);
                                },
                            }
                            },formatDate(new Date(params.row.PublicityTime),'yyyy-MM-dd')

                            );/*这里的this.row能够获取当前行的数据*/
                        }
                    },
                    {
                        title: '  ',
                        key: 'action',
                        width: 80,
                        align: 'center',
                        render: (h, params) => {
                            let isDeleteTemp = params.row.IsDelete;
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'ios-brush-outline',
                                        size:'15',
                                    },
                                    style: {
                                        marginRight: '5px',
                                      /*  visibility: 'hidden',*/
                                    //   display:isDeleteTemp!='0'?'none':'',
                                    },
                                    on: {
                                        click: (event)=> {
                                            event.stopPropagation()
                                          /*  this.show(params.index)*/
                                           this.publicEditor(params.row.Id);
                                        },
                                    },

                                }),
                                h('Icon', {
                                    props: {
                                        type: 'ios-trash-outline',
                                        size:'15'
                                    },
                                    style:{
                                        // display:isDeleteTemp!='0'?'none':'',
                                    },
                                    on: {
                                        click: (event) => {
                                            event.stopPropagation();
                                            // 弹出删除对话框
                                            this.$Modal.confirm({
                                                title: '提示',
                                                content: '<p>是否删除此公示</p>',
                                                onOk: () => {
                                                    this.remove(params.index,params.row.Id);
                                                },
                                                onCancel: () => {
                                                }
                                            });
                                        }
                                    }
                                }),
                            ]);
                        }
                    }
                 ],
                publicCityList:[],
                pageTotal:0,
                pageNum: 1,
                pageSize: 20,
                // 草稿分页
                // pageTotalDraft: 0,
                pageNumDraft: 1,
                pageSizeDraft: 20,
                load:true,
                state:2,//0草稿，1未审核，2已发布
                isShowDel:true,
                isRelease:true,
            };
        },
        methods: {
            // 切换显示
            toggleShow(type) {
                if(type == "releasedBtn") {
                    this.state = 2;//2已发布
                    this.isShowDel=true;
                    this.isRelease=true;
                    this.releasedBtn = 'primary';
                    this.draftBtn = "default";
                    this.getList();
                }else if(type="draftBtn") {
                    this.state ='0,1';//0草稿
                    this.isShowDel=true;
                    this.releasedBtn = 'default';
                    this.draftBtn = "primary";
                    this.isRelease=false;
                    this.getList();
                }
            },
            getList(){
                this.load=true;
                var pageNum,pageSize;
                if(this.releasedBtn == 'primary') {
                    pageNum = this.pageNum-1
                    pageSize = this.pageSize
                }else {
                    pageNum = this.pageNumDraft-1
                    pageSize = this.pageSizeDraft
                }
                this.$post('/publicity/findOneOrTwoPublicity',
                    {
                        State:this.state,
                        IsShowDel:this.isShowDel,
                        PageIndex:pageNum,
                        PageSize:pageSize,
                        IsRelease:this.isRelease,
                    }
                )
                    .then( (res) => {
                        this.publicCityList = res.publicCityList;
                        this.pageTotal = res.publicCityListNum;
                        this.load=false;
                    })
                    .catch( (error) => {
                        console.log(error);
                    });
            },
            handlePage(value) {
                if(this.releasedBtn == 'primary') {
                    this.pageNum = value
                }else {
                    this.pageNumDraft = value
                }
                this.getList();
            },
            handlePageSize(value) {
                if(this.releasedBtn == 'primary') {
                    this.pageSize = value
                }else {
                    this.pageSizeDraft = value
                }
                this.getList();
            },
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: ``
                })
            },
            remove (index,id) {
                console.log('触发删除事件')
                axios.post('/publicity/deletePublicityId',
                    {
                        Id:id
                    }
                        )
                    .then((res) => {
                        if(res._STATUS==1){
                            /*this.toggleShow('draftBtn');*/
                            this.$Message.success("删除成功");
                            this.getList();
                            this.publicCityList.splice(index, 1);
                        }

                })
                    .catch((error => {

                }))
             /*   this.publicCityList.splice(index, 1);*/
            },
            // 公示详情
            publicDetails(currentRow,oldCurrentRow){
                // console.log('触发详情事件')
                this.$store.commit('toggleHotId',currentRow.Id);
                this.$router.push({name: 'PublicDetials'});

                // this.$store.commit('toggleHotId',currentRow.Id);
                // this.$router.push({name: 'PublicEditor'});
            },

            // 跳转编辑
            publicEditor(id) {
                console.log('触发编缉事件')
                this.$store.commit('toggleHotId',id)
                this.$router.push({name: 'PublicEditor'});
            },
        },
        mounted() {
            // this.getList();
            // console.log(this.$route.params.draftBtn)
            if(this.$route.params.draftBtn == 'primary') {
                this.draftBtn = 'primary'
                this.releasedBtn = 'default'
                this.state = '0,1'
                this.isShowDel=true;
                this.isRelease=false;
                this.getList()
            }else {
              this.getList();
            }
        },
        watch: {

        }
    };
</script>

<style scoped>

</style>
